<template>
  <view>
    <view>
      <!-- 选择收货地址的盒子 -->
      <view class="address-choose-box" v-if="JSON.stringify(address) === '{}'">
        <button type="primary" size="mini" class="btnChooseAddress" @click="chooseAddress">请选择收货地址+</button>
      </view>

      <!-- 渲染收货信息的盒子 -->
      <view class="address-info-box" v-else @click="chooseAddress">
        <view class="row1">
          <view class="row1-left">
            <view class="username">收货人：<text>{{address.userName}}</text></view>
          </view>
          <view class="row1-right">
            <view class="phone">电话：<text>{{address.telNumber}}</text></view>
            <uni-icons type="arrowright" size="16"></uni-icons>
          </view>
        </view>
        <view class="row2">
          <view class="row2-left">收货地址：</view>
          <view class="row2-right">{{addstr}}</view>
        </view>
      </view>

      <!-- 底部的边框线 -->
      <image src="/static/cart_border@2x.png" class="address-border"></image>

      <!-- 发布需求部分 -->
      <view>
        <view class="c_box">
          <view class="c_top" style="height: 5rpx;"></view>
          <view class="context">
            <textarea class="c_context" @blur="bindTextAreaBlur" :value="inputValue" placeholder="请输入配送内容" />
          </view>
          <view class="c_button" @click="clearContext">清空内容</view>
        </view>
        <view class="ul_tag">
          <text class="left">物品属性：</text>
          <input class="left tag_input" type="text" @input="onInpuGoodTypet" :value="goodType" placeholder="请输入" />
        </view>
        <view class="ul_tag">
          <text class="left">金额：</text>
          <input class="left tag_input" style="width: 100rpx;" @input="onInputMoney" type="digit" :value="payMoney"
            placeholder="请输入" />
          <text>元 (金额为0.5倍数)</text>
        </view>
        <view class="ul_tag">
          <view class="uni-form-item uni-column">
            <radio-group name="priSong" @change="runChange">
              <label class="left">配送方式：</label>
              <label>
                <radio value="0" checked="checked" /><text>普通&nbsp;&nbsp;&nbsp;</text>
                <radio value="1" /><text>加急(+4￥)</text>
              </label>
            </radio-group>
          </view>
        </view>
        <view class="ul_tag">
          <view class="uni-form-item uni-column">
            <radio-group name="pay" @change="payChange">
              <label class="left">支付方式：</label>
              <label>
                <radio value="0" checked="checked" /><text>线下支付&nbsp;&nbsp;&nbsp;</text>
                <radio value="1" /><text>线上支付</text>
              </label>
            </radio-group>
          </view>
        </view>
      </view>
      <!-- 结算按钮 -->
      <view class="btn-settle" @click="commitPay">结算</view>
    </view>
  </view>
</template>

<script>
  // 1. 按需导入 mapState 和 mapMutations 这两个辅助函数
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'


  export default {
    name: "my-address",
    computed: {
      // 调用 mapState 辅助方法，把 m_user 模块中的数据映射到当前用组件中使用
      ...mapState('m_user', ['userInfo', 'address', 'money']),
      // 收货详细地址的计算属性
      addstr() {
        if (!this.address.provinceName) return ''
        // 拼接 省，市，区，详细地址 的字符串并返回给用户
        return this.address.provinceName + this.address.cityName + this.address.countyName + this.address.detailInfo
      }
    },
    data() {
      return {
        inputValue: '',
        goodType: '',
        payMoney: 0,
        runType: 0,
        payType: 0,
      };
    },
    methods: {

      // 3.1 把 m_user 模块中的 updateAddress 函数映射到当前组件
      ...mapMutations('m_user', ['updateAddress', 'saveMoney']),
      // 支付
      async commitPay() {

        var obj = {
          uid: this.userInfo.userId,
          context: this.inputValue,
          tag: this.goodType,
          money: this.payMoney * 10,
          emergencyFee: 0,
          runType: this.runType,
          payType: this.payType,
          address: this.address
        }
        // 逻辑判断
        if (!this.address.provinceName) {
          uni.$showMsg("请选择地址");
          return;
        }
        if (obj.context.length == 0) {
          uni.$showMsg("内容不能为空");
          return;
        }
        if (obj.tag.length == 0) {
          uni.$showMsg("物品属性不能为空");
          return;
        }
        if (obj.money == 0 || obj.money % 5 != 0) {
          uni.$showMsg("金额不正确");
          return;
        }
        // 加上加急金额
        if (obj.runType == 1) {
          obj.emergencyFee = 40;
        }
        // 判断金额是否充足
        // console.log(obj.emergencyFee + obj.money)
        // if (this.userInfo.money < (obj.emergencyFee + obj.money)) {
        //   uni.$showMsg("金额不足请充值，或线下支付");
        //   return;
        // }
        
        // 发起请求
        const {
          data: result
        } = await uni.$http.post('/api/READ/api/my/demand/insert', JSON.stringify(obj))
        if (result.code != '200') return uni.$showMsg(result.msg);
        console.log(obj)
        if (obj.payType == 1) {
          var temp = {
            money: this.money - obj.money - obj.emergencyFee,
          }
          console.log(temp)
          this.saveMoney(temp)
        }

        if (result.code == 200) {
          uni.showModal({
            title: '提示',
            content: '成功发布',
            success: function(res) {
              uni.switchTab({
                url: '/pages/demand/demand'
              })
            }
          });
        } else {
          uni.$showMsg(result.msg);
        }

      },
      onInpuGoodTypet(e) {
        this.goodType = e.target.value;
      },
      onInputMoney(e) {
        this.payMoney = e.target.value;
      },
      bindTextAreaBlur: function(e) {
        this.inputValue = e.detail.value;
      },
      //单选框（获取学生性别）		
      runChange: function(evt) {
        this.runType = evt.detail.value
      },
      payChange: function(evt) {
        this.payType = evt.detail.value
      },
      // 清空内容
      clearContext() {
        console.log(this.inputValue)
        this.inputValue = "";
      },
      // 选择收货地址
      async chooseAddress() {
        // 1. 调用小程序提供的 chooseAddress() 方法，即可使用选择收货地址的功能
        //    返回值是一个数组：第1项为错误对象；第2项为成功之后的收货地址对象
        const [err, succ] = await uni.chooseAddress().catch(err => err)

        // 2. 用户成功的选择了收货地址
        if (succ && succ.errMsg === 'chooseAddress:ok') {
          // 更新 vuex 中的收货地址
          this.updateAddress(succ)
        }
      },
    },
  }
</script>

<style lang="scss">
  .btn-settle {
    height: 50px;
    min-width: 100px;
    background-color: #00AA00;
    color: white;
    line-height: 50px;
    text-align: center;
    padding: 0 10px;
  }

  .left {
    margin-left: 30rpx;
    float: left;
  }

  .tag_input {
    margin-top: 28rpx;
    line-height: 100rpx;
    width: 200rpx;
  }

  .ul_tag {
    line-height: 100rpx;
    margin: 20rpx;
    height: 100rpx;
    background-color: #F8F8FF;
  }

  .c_button {
    margin-left: 10%;
    width: 140rpx;
    height: 60rpx;
    color: blueviolet;
  }

  .c_context {
    border-radius: 10rpx;
    margin: 10rpx;
  }

  .c_box {
    border-radius: 10rpx;
    margin: 1%;
    background-color: #F8F8FF;
  }

  .context {
    margin-top: 3%;
    margin: 3%;
    text-shadow: 5rpx, 5rpx, 5rpx, 5rpx;
    font-size: 35rpx;
    height: 300rpx;
    background-color: #00AA00;
  }

  .input {
    line-height: 28rpx;
    font-size: 28rpx;
    color: #000000;
    text-align: right;
    border: 1px solid rgb(220, 211, 211);
    padding: 10rpx;
    margin: 20rpx;
  }

  // 底部边框线的样式
  .address-border {
    display: block;
    width: 100%;
    height: 5px;
  }

  // 选择收货地址的盒子
  .address-choose-box {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  // 渲染收货信息的盒子
  .address-info-box {
    font-size: 12px;
    height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 5px;

    // 第一行
    .row1 {
      display: flex;
      justify-content: space-between;

      .row1-right {
        display: flex;
        align-items: center;

        .phone {
          margin-right: 5px;
        }
      }
    }

    // 第二行
    .row2 {
      display: flex;
      align-items: center;
      margin-top: 10px;

      .row2-left {
        white-space: nowrap;
      }
    }
  }
</style>
